<template>
	<view class='page_cont'>
		<view class='top_wrap'>
			<view class='title'>选择您的身份</view>
			<view class='subtitle'>明确您的身份，家巴啦才能为你 提供更好的服务</view>
		</view>
		<view class='item_wrap' :class="check_index==1?'active':''" @click="check_item(1)">
			<image class='img' src="/static/icon55.png"></image>
			<view class="desc">
				<view class="title">我是老师</view>
				<view class='text'>太阳底下最光辉的职业，人类灵魂的工程师</view>
			</view>
			<image class='icon' src="/static/icon54.png" v-if="check_index==1"></image>
		</view>
		<view class='item_wrap' :class="check_index==2?'active':''" @click="check_item(2)">
			<image class='img' src="/static/icon56.png"></image>
			<view class="desc">
				<view class="title">学校单位</view>
				<view class='text'>家巴啦聚合了优质的师资资源，帮您打造一支强有力的师资团队</view>
			</view>
			<image class='icon' src="/static/icon54.png" v-if="check_index==2"></image>
		</view>
		<view class='next' @click="nav_next()">下一步</view>
	</view>
</template>

<script>
	import util from "../../utils/util.js"
	export default{
		data(){
			return {
				check_index: 0
			}
		},
		methods:{
			check_item(index){
				this.check_index=index;
			},
			nav_next(){
				if(this.check_index==0){
					util.page_show_toast("请选择您的身份",1500)
					return false;
				}
				if(this.check_index==1){
					uni.navigateTo({
						url: '../../mypage/myDom/myDom'
					})
				}else{
					uni.navigateTo({
						url: '../bindUnit/bindUnit'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.page_cont{
		padding: 66rpx 32rpx 0 32rpx;
		.top_wrap{
			width: 100%;
			margin-bottom: 86rpx;
			.title{
				text-align: center;
				height: 74rpx;
				font-size: 52rpx;
				font-weight: 600;
				line-height: 74rpx;
				color: #3F4A58;
				margin-bottom: 12rpx;
			}
			.subtitle{
				width: 420rpx;
				text-align: center;
				margin: auto;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #798594;
			}
		}
		.item_wrap{
			padding: 40rpx;
			display: flex;
			flex-direction: row;
			position: relative;
			border-radius: 16rpx;
			background: #F6F7F9;
			margin-bottom: 66rpx;
			border: 4rpx solid rgba(0,0,0,0);
			.img{
				width: 160rpx;
				height: 160rpx;
				margin-right: 32rpx;
			}
			.desc{
				flex: 1;
				padding-top: 4rpx;
				.title{
					text-align: left;
					height: 56rpx;
					font-size: 40rpx;
					font-weight: 600;
					line-height: 56rpx;
					color: #3F4A58;
				}
				.text{
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #798594;
				}
			}
			.icon{
				position: absolute;
				top: -4rpx;
				right: -4rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.active{
			border: 4rpx solid rgba(91,144,255,0.8);
		}
		.next{
			position: fixed;
			bottom: 32rpx;
			left: 32rpx;
			width: 686rpx;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #fff;
			background: #5B90FF;
			border-radius: 16rpx;
		}
	}
</style>
